<template>
    <div>
        <p>
            <button class="btn btn-bold btn-success btn-round ">
                <i class="ace-icon fa fa-code-fork bigger-140"></i>
                第三方代码
            </button>
        </p>
        <div class="row">
            <div class="col-sm-4">
                <div class="widget-box">
                    <div class="widget-header widget-header-flat">
                        <h4 class="widget-title smaller">
                            <i class="ace-icon fa fa-quote-left smaller-80"></i>
                            功能简介
                        </h4>
                    </div>

                    <div class="widget-body">
                        <div class="widget-main">
                            <div class="row">
                                <div class="col-xs-12">
                                    <blockquote class="pull-right">
                                        <p>功能模块不仅限于第三方代码,还可以针对不同终端设备进行自定义代码添加！</p>
                                    </blockquote>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-xs-12">
                                    <blockquote>
                                        <p class="lighter line-height-125">
                                            Function modules are not limited to third-party code, but also can be
                                            customized for different terminal devices to add code!
                                        </p>

                                        <small>
                                            站牛网
                                            <cite title="Source Title">Third-Party-Code</cite>
                                        </small>
                                    </blockquote>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xs-12 col-sm-8">
                <div class="widget-box">
                    <div class="widget-header">
                        <h4 class="widget-title">PC端</h4>
                    </div>

                    <div class="widget-body">
                        <div class="widget-main">


                                <label >输入代码：</label>

                                <el-form ref="form" :model="form" >
                                    <el-form-item >
                                        <el-input class="big_text" type="textarea" :autosize="{minRows:22,maxRows:22}" resize="none" v-model="form.desc"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="onSubmit">提交</el-button>
                                    </el-form-item>
                                </el-form>

                        </div>
                    </div>
                </div>
            </div><!-- /.span -->


        </div><!-- PAGE CONTENT ENDS -->
    </div>
</template>

<script>
    //import Pagination from "../../components/pagination";
    export default {
        name: "system-third-code",
        //components: {Pagination},
        data: function () {
            return {
                resources: {},
                resourcess: [],
                //绑定多行文本框内容
                resourcesStr: "",
                resourcesTree: {},
                dataForm: {
                    attrId: 0,
                    attrName: "",
                    searchType: 0,
                    valueType: 1,
                    icon: "",
                    valueSelect: "",
                    attrType: 1,
                    enable: 1,
                    catelogId: "",
                    attrGroupId: "",
                    showDesc: 0
                },
                dataRule: {
                    attrName: [
                        {required: true, message: "属性名不能为空", trigger: "blur"}
                    ],
                    searchType: [
                        {
                            required: true,
                            message: "是否需要检索不能为空",
                            trigger: "blur"
                        }
                    ],
                    valueType: [
                        {
                            required: true,
                            message: "值类型不能为空",
                            trigger: "blur"
                        }
                    ],
                    icon: [
                        {required: true, message: "属性图标不能为空", trigger: "blur"}
                    ],
                    attrType: [
                        {
                            required: true,
                            message: "属性类型不能为空",
                            trigger: "blur"
                        }
                    ],
                    enable: [
                        {
                            required: true,
                            message: "启用状态不能为空",
                            trigger: "blur"
                        }
                    ],
                    catelogId: [
                        {
                            required: true,
                            message: "需要选择正确的三级分类数据",
                            trigger: "blur"
                        }
                    ],
                    showDesc: [
                        {
                            required: true,
                            message: "快速展示不能为空",
                            trigger: "blur"
                        }
                    ]
                },
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
            }
        },
        mounted: function () {
            let _this = this;
            //更换树型结构，取消分页后，无需指定页码
            //_this.$refs.pagination.size=10;
            //_this.list(1);
            _this.list();

        },
        methods: {
            /**
             * 列表查询：树型结构
             */
            list(page) {
                let _this = this;
                Loading.show();
                _this.$ajax.get(process.env.VUE_APP_SERVER + '/system/admin/resources/load-resources-tree')
                    .then((responseDTO) => {
                        Loading.hide();
                        console.log("查询资源管理表列表：", responseDTO);
                        let resp = responseDTO.data;
                        _this.resourcess = resp.responseData;
                        //初始化树型结构
                        _this.initResourcesTree();
                    })
            },

            /**
             * 点击【保存】
             */
            save(page) {
                let _this = this;

                //保存校验
                if (Tool.isEmpty(_this.resourcesStr)) {
                    Toast.warning("配置资源不能为空！");
                    return;
                }
                let json = JSON.parse(_this.resourcesStr);

                Loading.show();
                _this.$ajax.post(process.env.VUE_APP_SERVER + '/system/admin/resources/save', json)
                    .then((responseAdd) => {
                        Loading.hide();
                        console.log("保存资源管理表结果：", responseAdd);
                        let resp = responseAdd.data;
                        if (resp.success) {
                            $("#form-modal").modal('hide');
                            _this.list(1);
                            //添加提示
                            Toast.success("保存成功！");
                        } else {
                            Toast.warning(resp.responseMsg);
                        }
                    })
            },

            /**
             * 点击【删除】
             */
            del(id) {
                let _this = this;
                Confirm.show("删除资源管理表后不可恢复!", function () {
                    Loading.show();
                    _this.$ajax.delete(process.env.VUE_APP_SERVER + '/system/admin/resources/delete/' + id)
                        .then((responseDel) => {
                            Loading.hide();
                            console.log("删除资源管理表内容：", responseDel);
                            let resp = responseDel.data;
                            if (resp.success) {
                                _this.list(1);
                                Toast.success("删除成功！");
                            }
                        });
                });
            },
            /**
             * 初始化结构树
             */
            initResourcesTree() {
                let _this = this;
                let setting = {
                    data: {
                        simpleData: {
                            idKey: "id",
                            pIdKey: "parent",
                            rootPId: "",
                            //enable:true
                        }
                    }
                };
                _this.zTree = $.fn.zTree.init($("#resourcesTree"), setting, _this.resourcess);
                //全部展开
                _this.zTree.expandAll(true);
            },
            onSubmit(){
                console.log("提交！")
            }
        }
    }
</script>

<style scoped>
    .big_text{
        height: 500px;
        min-height: 500px ;
    }
    .el-textarea__inner{
        height: 150px;
        overflow-y: auto;
        /* overflow-y: auto;兼容ie  */
    }

</style>